<template>
  <div class="hero-page relative w-full min-h-full">
    <!-- Animated background shapes -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-10 -left-10 w-48 sm:w-72 h-48 sm:h-72 bg-pink-300 rounded-full filter blur-xl opacity-70 animate-float will-change-transform"></div>
      <div class="absolute -bottom-10 -right-10 w-48 sm:w-72 h-48 sm:h-72 bg-purple-300 rounded-full filter blur-xl opacity-70 animate-float will-change-transform" style="animation-delay: 2s"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 sm:w-72 h-48 sm:h-72 bg-yellow-300 rounded-full filter blur-xl opacity-70 animate-float will-change-transform" style="animation-delay: 4s"></div>
    </div>

    <!-- Main content -->
    <div class="relative z-10 px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8 sm:py-12">
      <!-- Hero Section -->
      <div class="text-center mb-8 sm:mb-16">
        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 sm:mb-6">
          <span class="gradient-text">Huahua API</span>
        </h1>
        <p class="text-lg sm:text-xl md:text-2xl text-gray-700 mb-6 sm:mb-8 px-4 sm:px-0">
          强大的开源API工具集，让开发更简单
        </p>

        <!-- Feature badges -->
        <div class="flex flex-wrap justify-center gap-3 sm:gap-4 mb-8 sm:mb-12">
          <div class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg transform hover:scale-105 transition-all duration-300">
            <svg class="w-5 h-5 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
            </svg>
            <span class="text-gray-700 font-medium">100% 开源</span>
          </div>
          <div class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg transform hover:scale-105 transition-all duration-300">
            <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
            </svg>
            <span class="text-gray-700 font-medium">高性能</span>
          </div>
          <div class="inline-flex items-center px-4 py-2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg transform hover:scale-105 transition-all duration-300">
            <svg class="w-5 h-5 mr-2 text-purple-500" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 015.905-.75 1 1 0 001.937-.5A5.002 5.002 0 0010 2z"/>
            </svg>
            <span class="text-gray-700 font-medium">安全可靠</span>
          </div>
        </div>
      </div>

      <!-- Features Grid -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 mb-12 sm:mb-16">
        <div class="card group hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
          <div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-pink-400 to-pink-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">完全开源</h3>
          <p class="text-gray-600">所有代码完全开源，透明可审计，社区驱动开发</p>
        </div>

        <div class="card group hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
          <div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">稳定可靠</h3>
          <p class="text-gray-600">经过严格测试，保证服务的稳定性和可用性</p>
        </div>

        <div class="card group hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300">
          <div class="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mb-4 group-hover:scale-110 transition-transform duration-300">
            <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"/>
            </svg>
          </div>
          <h3 class="text-xl font-bold text-gray-800 mb-2">活跃社区</h3>
          <p class="text-gray-600">欢迎提交issue和PR，保持项目活跃更新</p>
        </div>
      </div>

      <!-- Repository Links -->
      <div class="space-y-6">
        <h2 class="text-3xl font-bold text-center mb-8 gradient-text">项目仓库</h2>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Frontend Repo -->
          <a href="https://gitee.com/huahua522/huahua-api-vue-user.git" target="_blank"
             class="group relative bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 border border-gray-100">
            <div class="absolute inset-0 bg-gradient-to-r from-pink-400/10 to-purple-400/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative">
              <div class="flex items-center mb-3">
                <div class="p-2 bg-gradient-to-br from-pink-400 to-pink-600 rounded-lg text-white mr-3">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">前端仓库</h3>
              </div>
              <p class="text-gray-600 text-sm break-all">https://gitee.com/huahua522/huahua-api-vue-user.git</p>
            </div>
          </a>

          <!-- Backend Repo -->
          <a href="https://gitee.com/huahua522/huahua-api.git" target="_blank"
             class="group relative bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 border border-gray-100">
            <div class="absolute inset-0 bg-gradient-to-r from-purple-400/10 to-blue-400/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative">
              <div class="flex items-center mb-3">
                <div class="p-2 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg text-white mr-3">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">后端仓库</h3>
              </div>
              <p class="text-gray-600 text-sm break-all">https://gitee.com/huahua522/huahua-api.git</p>
            </div>
          </a>

          <!-- Frontend Online -->
          <a href="https://www.jxwazx.cn/" target="_blank"
             class="group relative bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 border border-gray-100">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-400/10 to-green-400/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative">
              <div class="flex items-center mb-3">
                <div class="p-2 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg text-white mr-3">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z" clip-rule="evenodd"/>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">前端在线地址</h3>
              </div>
              <p class="text-gray-600 text-sm">https://www.jxwazx.cn/</p>
            </div>
          </a>

          <!-- Backend Online -->
          <a href="https://api.jxwazx.cn/api/" target="_blank"
             class="group relative bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300 border border-gray-100">
            <div class="absolute inset-0 bg-gradient-to-r from-green-400/10 to-yellow-400/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative">
              <div class="flex items-center mb-3">
                <div class="p-2 bg-gradient-to-br from-green-400 to-green-600 rounded-lg text-white mr-3">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                  </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-800">后端在线地址</h3>
              </div>
              <p class="text-gray-600 text-sm">https://api.jxwazx.cn/api/</p>
            </div>
          </a>
        </div>
      </div>

      <!-- CTA Section -->
<!--      <div class="text-center mt-12 sm:mt-16 pb-8">-->
<!--        <button class="btn-primary text-base sm:text-lg px-6 sm:px-8 py-2.5 sm:py-3 mr-2 sm:mr-4 mb-3 sm:mb-4">-->
<!--          开始使用-->
<!--        </button>-->
<!--        <button class="bg-white text-gray-700 font-medium py-2.5 sm:py-3 px-6 sm:px-8 rounded-lg hover:bg-gray-50 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">-->
<!--          查看文档-->
<!--        </button>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script lang="ts" setup>

// 清理未使用的导入和变量
</script>

<style scoped>
.hero-page {
  background: linear-gradient(to br, #ffeef2, #ffe0e6, #ffc5d8);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 105, 180, 0.3) transparent;
}

.hero-page::-webkit-scrollbar {
  width: 8px;
}

.hero-page::-webkit-scrollbar-track {
  background: rgba(255, 105, 180, 0.1);
}

.hero-page::-webkit-scrollbar-thumb {
  background: rgba(255, 105, 180, 0.3);
  border-radius: 4px;
}

.hero-page::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 105, 180, 0.5);
}
</style>
